import React, { Component } from 'react'
import { Table, Button,Modal,Form, Input,Select,List, Divider} from 'antd'
import {
          DeleteOutlined
} from '@ant-design/icons'

import Echarts1 from './echarts1'
import axios from 'axios'

// const data = [
//   'Racing car sprays burning fuel into crowd.',
//   'Japanese princess to wed commoner.',
// ];
const { Option } = Select;
const layout = {
  labelCol: { span: 9 },
  wrapperCol: { span: 15 },
};


const onFinish = values => {
  console.log('Success:', values);
};
const onFinishFailed = errorInfo => {
  console.log('Failed:', errorInfo);
};

export default class AddMenu extends Component {
    componentDidMount() {
        axios.get('http://localhost:5000/Cuisine').then(res=>{
            //console.log(res.data)
            this.setState({
               datalist:res.data,
               recipeList:res.data
            })
        })

       
    }
    
    state={
       
       isshow:true,
       currentitem:{},
       recipeList:[],
       list:[],
       visible: false,
       visible1: false,
       dataform:"",
        columns:[
           
            {
              title: '菜系',
              dataIndex: 'name',
              key: 'name',
              width:'100px'
            },
            {
              title: '介绍',
              dataIndex: 'explain',
              key: 'explain',
            },
            {
              title: 'action',
              dataIndex: '',
              key: 'action',
              width:'100px',
              render:item=>{
                return <div>
                  {/* <Button type="primary" shape="circle" icon={<SearchOutlined />}/> */}
                  <Button type="danger" shape="circle" icon={<DeleteOutlined />} 
                  onClick={()=>this.handDele(item)} disabled/>
                </div>
              }
            },
            
        ],
        datalist:[]

    }
    render() {
        return (
            <div>
                <Button type="primary" onClick={this.handAdd}>添加菜系</Button>
                {/* 创建modal */}
                <Modal
                  title="Basic Modal"
                  visible={this.state.visible}
                  onOk={this.handleOk}
                  onCancel={this.handleCancel}
                >
                        <Form
                        {...layout}
                        name="basic"
                        initialValues={{ remember: true }}
                        onFinish={onFinish}
                        onFinishFailed={onFinishFailed}
                        ref="myform"
                      >
                        

                        <Form.Item
                          label="菜系"
                          name="name"
                          rules={[{ required: true, message: 'Please input your password!' }]}
                          
                        >
                          <Input />
                        </Form.Item>
                        <Form.Item
                          label="介绍"
                          name="explain"
                          rules={[{ required: true, message: 'Please input your password!' }]}
                        >
                          <Input/>
                        </Form.Item>

                    </Form>
                </Modal>
               
                 <Table columns={this.state.columns} dataSource={this.state.datalist} 
                rowKey={item=>item.id} pagination={{pageSize:3}}/>
                <div>
                      <Select
                          showSearch
                          defaultValue="川菜"
                          style={{ width: 200 }}
                          placeholder="选择菜系"
                          optionFilterProp="children"
                          onChange={this.onChange}
                          onSearch={this.onSearch}
                          >
                            {
                              this.state.recipeList.map(item=>{
                                return <Option value={item.name} key={item.id}>{item.name}</Option>
                              })
                            }
                      </Select>
                      <Divider orientation="left"></Divider>
                            <List
                              size="small"
                              bordered
                              dataSource={this.state.isshow? this.state.datalist:this.state.list}
                              renderItem={item => <List.Item>{item.explain}</List.Item>}
                            />
                </div>
              
                <Echarts1></Echarts1>
            </div>
        )
    }
   
    onSearch=(value)=>{
      
        console.log('search:', value);
     
    }
    //模糊查询
    onChange=(value)=>{
      //console.log(this.state.datalist)
      this.setState({
        list:this.state.datalist.filter(item=>item.name===value),
        isshow:false
      })
      //console.log(this.state.list)
    }
       
      

    //创建菜谱按钮
    handAdd=()=>{
      //console.log("dianji")
      this.setState({
        visible:true
      })
    }
    //点击ok
    handleOk = e => {
      //console.log(this.refs.myform)
      this.refs.myform.validateFields().then(res=>{
        //console.log(res)
        this.setState({
          dataform:res,
          
        })
        //console.log(this.state.dataform)
        axios.post('http://localhost:5000/Cuisine',{
              ...this.state.dataform,
         }).then(res=>{
              this.setState({
                visible: false,
              datalist:[...this.state.datalist,res.data]
              })
      })
      //表单重置
      this.refs.myform.resetFields()
      })
     
    };
    //点击cancel
    handleCancel = e =>{
      this.setState({
        visible: false,
      })
    }

    handDele=(item)=>{
        axios.delete(`http://localhost:5000/Cuisine/${item.id}`).then(res=>{
            this.setState({
                datalist:this.state.datalist.filter(data=>data.id!==item.id)
            })
        })
    }
}
